<template>
  <div>
    <div class="left">
      <guan-li></guan-li>
    </div>
    <div class="menu">
      <h3>菜单</h3>
      <table>
        <thead>
          <tr>
            <th>品种</th>
            <th>删除</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in getItems" :key="index">
            <td>{{item.name}}</td>
            <td>
              <button @click="del(item)">X</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import guanLi from "../components/guanLi.vue";
// import axios from "axios";
export default {
  components: {
    "guan-li": guanLi
  },
  data() {
    return {
      getItems: []
    };
  },
  //   created生命周期函数，实现函数自执行
  created() {
    fetch("https://pizzia.firebaseio.com/menu.json")
      .then(res => {
        //   return res.json();
        //   res.json就可以拿到menu.json里面的信息了
        //   console.log(res.json());
        return res.json();
      })
      //   data是数据
      .then(data => {
        //   用数组把数据装起来
        let menuArry = [];
        for (let key in data) {
          // key就是每条的数据的id号
          //   console.log(key);
          //   拿到每个对象的数据
          console.log(data[key]);
          // 给数据加上id号
          data[key].id = key;
          menuArry.push(data[key]);
        }
        this.getItems = menuArry;
        console.log(this.getItems);
      });
  },
  methods: {
    del(item) {
      //   console.log(item.id);
      //   加上id就可以准确的删除了
      fetch("https://pizzia.firebaseio.com/menu/" + item.id + "/.json", {
        //   执行的是删除的命令
        method: "DELETE",
        headers: {
          // 当向后台传递复杂json的时候，同样需要添加 contentType：“application/json“，
          //   然后将数据转化为字符串
          "Content-type": "application/json"
        }
        // 这样就拿到menu下的信息
      })
        .then(res => res.json())
        .then(data => {
          this.$router.push("/guanLi");
        })
        .catch(err => console.log(err));
    }
  }
};
</script>
<style lang="less" scope>
.left {
  float: left;
}
.menu {
  float: right;
  margin-right: 340px;
}
th,
td {
  padding: 40px;
  background: rgb(233, 223, 223);
}
</style>